<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }

        form {
            background-color: white;
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
        }

        td:first-child {
            font-weight: bold;
            width: 50%;
            text-align: right;
            padding-right: 20px;
        }

        input[type="text"], input[type="password"], input[type="email"],
        input[type="date"], select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }

        input[type="radio"], input[type="checkbox"] {
            margin-right: 5px;
        }

        textarea {
            height: 80px;
            resize: vertical;
        }

        input[type="reset"], input[type="submit"] {
            padding: 12px 30px;
            margin: 10px 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"] {
            background-color: #007bff;
            color: white;
        }

        input[type="reset"] {
            background-color: #6c757d;
            color: white;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input[type="reset"]:hover {
            background-color: #545b62;
        }

        h2 {
            text-align: center;
            color: #333;
            margin-top: 0;
        }

        .radio-group, .checkbox-group {
            display: inline-block;
        }
    </style>
</head>

<body>
<!--
action 是服务器的路径,即表单数据就是要提交到这里
method: 请求方式,后端使用doGet接收
-->
<form action="/day30_tomcat_serlet_war/demo" method="get">
    <h2>用户信息表单</h2>
    <table>
        <tr>
            <td>用户名</td>
            <td>
                <!-- 前端输入框,一定要有name,后端通过name获得该输入框的值-->
                <input type="text" name="username" placeholder="请输入用户名">
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <input type="password" name="password" placeholder="请输入密码">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <!--单选框一定要有value,否则后端得到是on-->
                <div class="radio-group">
                    <input type="radio" name="sex" value="1" id="male">
                    <label for="male">男</label>
                </div>
                <div class="radio-group">
                    <input type="radio" name="sex" value="2" id="female">
                    <label for="female">女</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>技能</td>
            <td>
                <!--复选框一定要有value,否则后端得到是on-->
                <div class="checkbox-group">
                    <input type="checkbox" name="skill" value="java" id="java">
                    <label for="java">java</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" name="skill" value="linux" id="linux">
                    <label for="linux">linux</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" name="skill" value="vue" id="vue">
                    <label for="vue">vue</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td>
                <input type="email" name="email" placeholder="请输入邮箱">
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
                <input type="date" name="birthday">
            </td>
        </tr>

        <tr>
            <td>学历</td>
            <td>
                <select name="edu">
                    <option value="">请选择学历</option>
                    <option value="1">大专</option>
                    <option value="2">本科</option>
                    <option value="3">研究生</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>备注</td>
            <td>
                <textarea name="beizhu" placeholder="请输入备注信息"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <input type="reset" value="重置">
                <input type="submit" value="提交">
            </td>
        </tr>
    </table>
</form>


<a href="/day30_tomcat_serlet_war/login">登录</a>
</body>
</html>